import React, { useEffect, useState } from 'react';
import { Card, Form } from 'react-bootstrap';

const BasicSettings = ({ config, setConfig }) => {
  // 组件内部默认配置
  const defaultBasicConfig = {
    respawnTime: 5,
    disableBanlist: false,
    disablePrioritylist: false,
    disableVoN: 0,
    lightingConfig: 0,
    vonCodecQuality: 10,
    playerSurvivalTime: 0,
    forceFirstPerson: false
  };

  // 组件内部状态，用于表单输入临时存储
  const [localConfig, setLocalConfig] = useState(defaultBasicConfig);

  // 当外部config变化时，更新内部localConfig
  useEffect(() => {
    const mergedConfig = {
      ...defaultBasicConfig,
      ...config
    };
    setLocalConfig(mergedConfig);
  }, [config]);

  // 处理配置变更，同时更新本地状态和全局配置
  const handleConfigChange = (key, value) => {
    setLocalConfig(prev => ({ ...prev, [key]: value }));
    setConfig(prev => ({ ...prev, [key]: value }));
  };

  return (
    <Card className="h-100 border-3 shadow-medium" style={{backgroundColor: 'rgba(26, 26, 26, 0.6)', backdropFilter: 'blur(15px)', borderColor: '#d32f2f', boxShadow: '0 0 20px rgba(211, 47, 47, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 0 10px rgba(211, 47, 47, 0.2)'}}>
      <Card.Header style={{backgroundColor: 'rgba(40, 40, 40, 0.7)', backdropFilter: 'blur(15px)'}}>
        <h3 style={{color: 'var(--primary-color)'}}>基本设置</h3>
      </Card.Header>
      <Card.Body style={{color: '#ffffff', maxHeight: '70vh', overflowY: 'auto'}}>
        {/* 服务器基本信息 */}
        <h4 style={{color: '#ff6b6b', marginBottom: '15px', borderBottom: '1px solid rgba(255,255,255,0.1)', paddingBottom: '5px'}}>服务器基本信息</h4>
        <div className="row mb-4">
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>服务器名称</Form.Label>
              <Form.Control 
                type="text" 
                value={localConfig.hostname} 
                onChange={(e) => handleConfigChange('hostname', e.target.value)} 
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}}
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                显示在服务器浏览器中的名称
              </Form.Text>
            </Form.Group>
          </div>
          
        </div>

        {/* 服务器访问设置 */}
        <h4 style={{color: '#ff6b6b', marginBottom: '15px', borderBottom: '1px solid rgba(255,255,255,0.1)', paddingBottom: '5px'}}>访问设置</h4>
        <div className="row mb-4">
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>服务器密码</Form.Label>
              <Form.Control 
                type="password" 
                value={localConfig.password} 
                onChange={(e) => handleConfigChange('password', e.target.value)} 
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}}
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                留空表示无密码
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>管理员密码</Form.Label>
              <Form.Control 
                type="password" 
                value={localConfig.passwordAdmin} 
                onChange={(e) => handleConfigChange('passwordAdmin', e.target.value)} 
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}}
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                用于管理员访问的密码
              </Form.Text>
            </Form.Group>
          </div>
        </div>

        {/* 访问控制设置 */}
        <div className="row mb-4">
          <div className="col-md-4">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="enableWhitelist" 
                label="白名单" 
                checked={localConfig.enableWhitelist === 1} 
                onChange={() => handleConfigChange('enableWhitelist', localConfig.enableWhitelist === 1 ? 0 : 1)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                启用后，只有白名单用户可以连接服务器
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-4">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="disableBanlist" 
                label="禁用黑名单" 
                checked={localConfig.disableBanlist} 
                onChange={() => handleConfigChange('disableBanlist', !localConfig.disableBanlist)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                启用后将禁用服务器的黑名单功能
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-4">
            <Form.Group className="mb-3">
              <Form.Check 
                type="switch" 
                id="disablePrioritylist" 
                label="禁用优先级列表" 
                checked={localConfig.disablePrioritylist} 
                onChange={() => handleConfigChange('disablePrioritylist', !localConfig.disablePrioritylist)} 
                className="form-switch-glow"
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                启用后将禁用服务器的优先级列表功能
              </Form.Text>
            </Form.Group>
          </div>
        </div>

        {/* 游戏体验设置 */}
        <h4 style={{color: '#ff6b6b', marginBottom: '15px', borderBottom: '1px solid rgba(255,255,255,0.1)', paddingBottom: '5px'}}>游戏体验设置</h4>
        <div className="row mb-4">
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>重生时间（秒）</Form.Label>
              <Form.Control 
                type="number" 
                min="5" 
                max="300" 
                value={localConfig.respawnTime} 
                onChange={(e) => handleConfigChange('respawnTime', parseInt(e.target.value) || 5)} 
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}}
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                玩家死亡后重生所需的时间
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>生存时间 (分钟)</Form.Label>
              <Form.Control
                type="number"
                value={localConfig.playerSurvivalTime || 0}
                onChange={(e) => handleConfigChange('playerSurvivalTime', parseInt(e.target.value) || 0)}
                min="0"
                max="1440"
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}}
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                设置为0表示无限生存时间
              </Form.Text>
            </Form.Group>
          </div>
        </div>

        {/* 视角和显示设置 */}
        <div className="row mb-4">
          <div className="col-md-4">
            <Form.Check
              type="switch"
              id="forceFirstPerson"
              label="强制第一人称"
              checked={localConfig.forceFirstPerson || false}
              onChange={(e) => handleConfigChange('forceFirstPerson', e.target.checked)}
              className="form-switch-glow"
            />
          </div>
        </div>

        {/* 聊天和语音设置 */}
        <div className="row mb-4">


          <div className="col-md-4">
            <Form.Check 
              type="switch" 
              id="disableVoN" 
              label="禁用语音聊天" 
              checked={localConfig.disableVoN === 1} 
              onChange={() => handleConfigChange('disableVoN', localConfig.disableVoN === 1 ? 0 : 1)} 
              className="form-switch-glow"
            />
            <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
              启用后将禁用游戏内语音聊天功能
            </Form.Text>
          </div>
        </div>

        {/* 语音和视觉设置 */}
        <div className="row mb-4">
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>夜晚亮度</Form.Label>
              <Form.Select 
                value={localConfig.lightingConfig} 
                onChange={(e) => handleConfigChange('lightingConfig', parseInt(e.target.value))} 
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}}
              >
                <option value="0">较亮的夜晚</option>
                <option value="1">标准夜晚</option>
                <option value="2">较暗的夜晚</option>
              </Form.Select>
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                控制服务器夜晚照明效果
              </Form.Text>
            </Form.Group>
          </div>
          <div className="col-md-6">
            <Form.Group className="mb-3">
              <Form.Label>语音质量</Form.Label>
              <Form.Control 
                type="number" 
                min="1" 
                max="20" 
                value={localConfig.vonCodecQuality} 
                onChange={(e) => handleConfigChange('vonCodecQuality', parseInt(e.target.value) || 10)} 
                className="glass-input"
                style={{backgroundColor: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(10px)', border: '1px solid rgba(255,255,255,0.2)', color: '#ffffff'}}
              />
              <Form.Text className="text-muted" style={{color: '#ffffff', opacity: 1, display: 'block', fontSize: '0.9rem'}}>
                控制语音聊天质量（1-20，值越高质量越好）
              </Form.Text>
            </Form.Group>
          </div>
        </div>

        {/* 额外功能设置 */}
        <div className="row mb-4">
          <div className="col-md-6">
            <Form.Check 
              type="switch" 
              id="disableVehicleDamage" 
              label="禁用载具伤害" 
              checked={localConfig.disableVehicleDamage || false} 
              onChange={(e) => handleConfigChange('disableVehicleDamage', e.target.checked)} 
              className="form-switch-glow"
            />
          </div>
        </div>

        {/* 安全设置 */}
        <h4 style={{color: '#ff6b6b', marginBottom: '15px', borderBottom: '1px solid rgba(255,255,255,0.1)', paddingBottom: '5px'}}>安全设置</h4>
      </Card.Body>
    </Card>
  );
};

export default BasicSettings;